<template>
  <div class="update-gender">
    <van-picker
      title="修改性别"
      :default-index="this.userInfo.gender"
      show-toolbar
      :columns="columns"
      @cancel="$emit('close')"
      @confirm="onConfirm"
      @change="onGenderChange"
    />
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
import { mapState,mapMutations } from 'vuex';
import { UpdateUserGenderModel } from 'models/userInfo.js';

export default {
  name: 'UpdateGender',
  data () {
    return {
      columns: ['男', '女'],
      localGenderIndex: 0
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    ...mapMutations(['updateGender']),
    // 确认修改
    onConfirm() {
      const localGender = this.columns[this.localGenderIndex];
      
      const updateUserGenderModel = new UpdateUserGenderModel();
      updateUserGenderModel.updateUserGender(localGender, this.userInfo.id).then((res) => {
        const data = res.data;

        if (res && res.status === 0) {
          this.updateGender(localGender);
          // 提示信息
          Toast(data.msg);
          // 关闭弹出
          this.$emit('close')
        } else {
          Toast(data.msg);
        }
      })
    },
    onGenderChange(picker, value, index) {
      //    console.log(`当前值：${value}, 当前索引：${index}`);;
      this.localGenderIndex = index;
      console.log(this.localGenderIndex);
    }
  }

}
</script>

<style>

</style>
